import React, { useCallback, useRef } from "react";
import { Input, Select, Button } from "antd";
import style from "../../style/permissionsnav.module.scss";
import { getall } from "../../api/addpart";
import { add } from "../../api/User";
const Addacounts = () => {
  const fromref = useRef({
    username: "",
    phone: "",
    password: "",
    part: "",
    workname: "",
    type: "",
  });
  const partlist = useRef();
  const onChange = useCallback((value) => {
    console.log(`selected ${value}`);
    fromref.current.part = value;
  }, []);
  const onChange2 = useCallback((value) => {
    console.log(`selected ${value}`);
    if (value === "已启用") {
      value = 1;
    } else {
      value = 0;
    }
    fromref.current.type = value;
  }, []);
  const determine = useCallback(async () => {
    // console.log(fromref.current.__reactProps$sg3nc2pdxg.children.slice(0, -2));
    console.log(fromref.current);
    let res = await add(fromref.current);
  }, []);
  //获取所有部门
  const gepart = useCallback(async () => {
    let res = await getall();
    return res;
  }, []);
  gepart().then((res) => {
    // console.log(res);
    let obj = [];
    res.data.data
      .map((item) => item.name)
      .forEach((item) => {
        obj.push({ value: item, label: item });
      });
    console.log(obj);
    partlist.current = obj;
  });
  return (
    <>
      <div className={style.add}>添加用户</div>
      <from>
        <div className={style.list}>
          <span style={{ margin: "30px 10px 10px 40px" }}>账号名称:</span>
          <Input
            className={style.input}
            placeholder="请输入账号名称"
            onChange={(e) => (fromref.current.username = e.target.value)}
          />
        </div>
        <div className={style.list}>
          <span style={{ margin: "30px 10px 10px 40px" }}>手机号码:</span>
          <Input
            className={style.input}
            placeholder="请输入手机号码"
            onChange={(e) => (fromref.current.phone = e.target.value)}
          />
        </div>
        <div className={style.list} style={{ marginLeft: "30px" }}>
          <span style={{ margin: "30px 10px 10px 40px" }}>密码:</span>
          <Input
            className={style.input}
            placeholder="请输入密码"
            onChange={(e) => (fromref.current.password = e.target.value)}
          />
        </div>
        <div className={style.list} style={{ marginTop: "0px" }}>
          <span style={{ margin: "30px 10px 10px 40px" }}>归属部门:</span>
          <Select
            placeholder="请选择"
            onChange={onChange}
            style={{ margin: "20px 10px 0 0", width: "30vh" }}
            options={partlist.current}
          />
        </div>
        <div className={style.list} style={{ marginLeft: "30px" }}>
          <span style={{ margin: "30px 10px 10px 40px" }}>职位:</span>
          <Input
            className={style.input}
            placeholder="请输入职位名称"
            onChange={(e) => (fromref.current.workname = e.target.value)}
          />
        </div>
        <div className={style.list} style={{ marginTop: "0px" }}>
          <span style={{ margin: "30px 10px 10px 40px" }}>启用状态:</span>
          <Select
            placeholder="请选择"
            onChange={onChange2}
            style={{ margin: "20px 10px 0 0", width: "30vh" }}
            options={[
              {
                value: "已启用",
                label: "已启用",
              },
              {
                value: "未启用",
                label: "未启用",
              },
            ]}
          />
        </div>
        <div className={style.btns}>
          <Button style={{ margin: "0 0 0 40px" }}>取消</Button>
          <Button style={{ margin: "0 30px" }} onClick={determine}>
            确定
          </Button>
        </div>
      </from>
    </>
  );
};

export default Addacounts;
